<template>
    <div>
        <div style="padding: 10px;">
            <div style="float: left; width:40%">
                <div
                    style="padding: 0px 10px 0px 10px;background: rgb(255,251,230); border: 1px solid rgb(255,240,191);width: 90%;">
                    <div class="smallFont">请注意:</div>
                    建议使用统一管理入群欢迎语。 因企业微信接口限制，在[企业微信后台]群欢迎语素材库进行编辑或剧除操作。将不会同步更新
                </div>
                <br>
                <el-form ref="form" :model="addForm">
                    <el-row>
                        <el-col :span="4">文本信息：</el-col>
                        <el-col :span="20">
                            <div style="height: 150px; width: 90%; border: 1px solid #d7d7d7; border-radius: 8px;">
                                <div style="border-bottom: 1px solid #d7d7d7; padding: 6px; color: rgb(250,140,21)">
                                    [插入客户名称]
                                </div>
                                <el-input type="textarea" :rows="5" placeholder="请输入内容"
                                          v-model="addForm.welcomeMessage">
                                </el-input>
                            </div>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="4">其他信息：</el-col>
                        <el-col :span="20">
                            <div style="width: 90%">
                                <MaterialContentText ref="contentText" :contentType="[2]" insertName="clientName" :disabledAdd="true" :contentList="contentList"/>
                            </div>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="4">消息提醒：</el-col>
                        <el-col :span="20" style=" width: 80%;">
                            <el-switch v-model="addForm.status"></el-switch>
                            开启后，新建该条欢迎语将会通过[客户群]群发通知企业全部员工:管理员创建了新的入群欢迎语
<!--                            <el-link type="primary">查看示例</el-link>-->
                        </el-col>
                    </el-row>
                </el-form>
                <br>
                <div slot="footer" class="dialog-footer" style="text-align: center;">
                    <el-button @click="back()">取消</el-button>
                    <el-button type="primary" @click="create()">新建入群欢迎语</el-button>
                </div>
            </div>
        </div>


        <!-- 添加小程序 -->
        <el-dialog title="添加小程序" :visible.sync="xcx" width="35%">
            <div
                style="background: rgb(230,247,255); border: 1px solid rgb(145,213,255); padding: 5px 10px; margin-bottom: 15px;">
                请填写企业微信后台绑定的小程序 id 和路径，否则会造成发送失败
            </div>
            <el-form ref="form" :model="forms" label-width="120px">
                <el-form-item label="小程序标题">
                    <el-input v-model="forms.title"></el-input>
                </el-form-item>
                <el-form-item label="小程序appid">
                    <el-input v-model="forms.id"></el-input>
                </el-form-item>
                <el-form-item label="小程序路径">
                    <el-input v-model="forms.url"></el-input>
                </el-form-item>
                <el-form-item label="小程序封面">
                    <el-upload
                        action=""
                        list-type="picture-card">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                </el-form-item>
                <el-button @click="close">返回</el-button>
                <el-button type="primary" @click="submit">确定</el-button>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>

    import MaterialContentText from "@/components/material_content_text/material_content_text"
    const initContentList = [{
        contentType: 1,
        content: '',
        imageUrl: '',
        linkContent: {
            linkAddress: '',
            linkTitle: '',
            content: ''
        }
    }]
    export default {
        data() {
            return {
                // 表单数据
                addForm: {
                    name: '',
                    type: '1',
                    status: true
                },
                // 展示
                value: false,
                // 图片上传
                imageUrl: '',

                // 新建页选项卡
                messageType: '1',

                // 添加小程序页面
                xcx: false,
                // 添加小程序表单
                forms: {
                    title: '',
                    id: '',
                    url: '',
                    img: '',
                },
                contentList: [],
            }
        },
        // 注册组件
        components: {
            MaterialContentText
        },
        methods: {
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },

            // 返回
            back() {
                this.$emit("currentHandler", "list")
            },
            // 确定并返回
            create() {
                let that = this
                this.addForm.welcomeType = '1'
                if(this.addForm.status == true){
                    that.addForm.welcomeAlert = 'true'
                }else{
                    that.addForm.welcomeAlert = 'false'
                }
                let content= this.$refs.contentText.getData()
                if (content != null && content.length > 0) {
                    if (content[0]['contentType'] == '2') {
                        if (content[0]['material'] != null) {
                            if (content[0]['material']['materialType'] == '2') {
                                that.addForm.messageType = 2
                                that.addForm.welcomeAppendices = content[0]['material']['materialAppendices']
                            } else {
                                that.addForm.messageType = 4
                                that.addForm.welcomeAppendices = content[0]['material']['materialLinksCover']
                            }
                        }
                    } else if (content[0]['contentType'] == '3') {
                        that.addForm.messageType = 1
                        that.addForm.welcomeAppendices = content[0]['linkContent']['linkAddress']
                    }
                }
                this.$request("/api/welcome/addWelcome/1_0",this.addForm , "POST").then((data) => {
                    if (data.data == 1) {
                        this.$message({
                            message: "操作成功 ！",
                            type: 'success'
                        });
                    }
                })
                this.$refs.contentText.initData()
                this.back()

            },

            // 选项卡
            saveTypeUp(i) {
                this.messageType = i;
            },
            // 关闭
            close() {
                this.xcx = false;
            },
            // 确定
            submit() {
                this.xcx = false;
                this.$message({
                    type: 'success',
                    message: '已添加!'
                })
            },

            handleRemove(file) {
                console.log(file);
            },

            handleAvatarSuccess(res, file) {
                this.addForm.welcomeAppendices = this.$uri + res.paths[0];
            },

            handleAvatarChangeImg(file){
                if (this.beforeAvatarUpload(file.raw)){
                    this.addForm.welcomeAppendices = URL.createObjectURL(file.raw);
                    this.addForm.type = 2;
                }
            },
        },
    }
</script>

<style scoped>
    .el-row {
        margin: 10px 0;
    }

    /*文件域样式开始*/
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }

    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }

    /*文件域样式结束*/

    /* 添加小程序 */
    .xcx {
        height: 100px;
        width: 100px;
        background: rgb(251, 251, 251);
        border: 1px dashed #d7d7d7;
        border-radius: 8px;
        margin-top: 10px;
        color: #aaa;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        padding: 30px 0;
        box-sizing: border-box;
    }
</style>
